<template>
  <div class="main">
    <div class="main_username">
      <input v-model="user.username" class="username" type="text" placeholder="请输入用户名">
    </div>
    <div class="main_password">
      <input v-model="user.password" class="password" type="password" placeholder="请输入密码">
    </div>
    <el-button @click="login" type="primary" class="main_login">登录</el-button>
  </div>
</template>

<script setup lang="ts">
import {ElMessage} from 'element-plus'
import {reactive} from "vue";
import axios from "axios";
import router from "../router";
import {useTokenStore} from '../store'

interface User {
  username: string,
  password: string
}

//登录所需的信息
const user = reactive<User>({
  username: '11',
  password: '11'
})

//登录
const login = () => {
  axios.post("http://localhost:5001/chat/login", user).then((res) => {
    if (res.data != '') {
      ElMessage({
        message: '登录成功',
        type: 'success',
      })
      //跳转页面
      router.push("/home")
      //将用户信息存到cookie
      const store = useTokenStore()
      store.setToken(JSON.stringify(res.data))
    } else {
      console.log(66)
      ElMessage.error('登录失败')
    }
  })
}
</script>

<style lang="less" scoped>
.main {
  .main_username {
    margin-bottom: 10px;

    input {
      font-size: 30px;
    }
  }

  .main_password {
    input {
      font-size: 30px;
    }
  }

  .main_login {
    font-size: 30px;
    margin-top: 10px;
  }
}
</style>